<!--
import { async } from 'q';
 * @Author: your name
 * @Date: 2020-10-19 17:02:18
 * @LastEditTime: 2021-01-26 16:16:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\rights_management\rights_management.vue
-->
<template>
    <div class="rights-management-main-box">
        <div class="search-box">
      <div class="search-box-sub">
        <span class="lable-text">{{$t('login.tab-agent')}}</span>
        <el-select v-model="agentId" filterable :placeholder="$t('index.selectStates')" clearable>
          <el-option
            v-for="item in agentData"
            :key="item.sid"
            :label="item.firmName"
            :value="item.sid">
          </el-option>
        </el-select>
      </div>
      <div class="search-box-sub">
        <span class="lable-text">{{$t('system.function-permission-type')}}</span>
        <el-select v-model="roleType" filterable :placeholder="$t('index.selectStates')"  clearable>
          <el-option
            v-for="item in roleTypeList"
            :key="item.sid"
            :label="item.code"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search-box-sub">
        <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
      </div>
    </div>
    <div class="button-box">
      <el-button type="primary" icon='el-icon-edit' @click='showAddModal' style='margin-right:10px;'>{{$t('add')}}</el-button>
      <el-popconfirm
        :confirm-button-text="$t('sure')"
        :cancel-button-text="$t('cancel')"
        :title="$t('promotionManagement.allDelete')"
        @confirm='deleteBatch()'
      >
        <el-button type="" slot="reference" icon='el-icon-delete' >{{$t('delete')}}</el-button>
      </el-popconfirm>
    </div>
    <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true'>
        <template #roleType="{data}">
          {{returnRoleTypeCode(data.roleType)}}
        </template>
        <template #enableFlag="{data}">
          {{returnIsUseCode(data.enableFlag)}}
        </template>
        <template #option="{data}">
          <div class="option-box">
            <el-button size='small' type="primary" icon="el-icon-edit" @click='editUsers(data)' style="margin-right:10px;"></el-button>
            <el-popconfirm
              :confirm-button-text="$t('sure')"
              :cancel-button-text="$t('cancel')"
              :title="$t('index.delete_item_confirm')"
              @confirm='deleteUsers(data.sid)'
            >
              <el-button type="" slot="reference" icon='el-icon-delete' ></el-button>
            </el-popconfirm>
          </div>
        </template>
      </baseTable>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
      <addModal :dialogVisible='rightVisible' :agentList='agentList' :roleList='roleTypeList' @uploadPage='uploadPage' v-if='rightVisible'></addModal>
      <editModal :dialogVisible='rightVisibleEdit' :agentList='agentList' :roleList='roleTypeList' @uploadPage='uploadPage' :editDataList='editDataList'></editModal>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTableNew'
import addModal from './add.vue'
import editModal from './edit.vue'
export default {
    components: {
        baseTable,
        addModal,
        editModal
    },
    props: {

    },
    data() {
        return {
            agentId:'',
            roleType:'',
            agentData:[],
            roleTypeList:[],
            size:10,
            current:1,
            total:1,
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('login.tab-agent'),
                value: 'agentName',
            },
            {
                title: this.$t('system.user-account'),
                value: 'userName',
                slot: 'userName'
            },
            {
                title: this.$t('system.authority'),
                value: 'roleName',
                slot: 'roleName'
            },{
                title: this.$t('system.authority-description'),
                value: 'roleType',
                slot: 'roleType'
            },{
                title: this.$t('control'),
                value: 'userName',
                slot: 'option'
            }],
            agentList:[],
            selectDataList:[],
            editDataList:{}
        };
    },
    computed: {
      rightVisible(){
        return this.$store.state.sysStore.rightVisible
      },
      rightVisibleEdit(){
        return this.$store.state.sysStore.rightVisibleEdit
      },
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getAgent()
        this.getRoleTypeList()
        this.functionRole()
        this.functionRoleGetAgent()
    },
    methods: {
        editUsers(data){
          this.$store.commit('setRightVisibleEdit',true)
          this.editDataList = data
        },
        async deleteUsers(id){
          let res = await this.API.functionRoleDeleteBatch({
            ids:[id]
          })
          if(res.success){
                this.$message({
                    message: this.$t('index.control_success'),
                    type: 'success'
                });
            }else{
                this.$message({
                    message: this.$t('index.control_fail'),
                    type: 'warning'
                });
            }
            this.functionRole()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.functionRole()
        },
        handleCurrentChange(val) {
          this.current = val
          this.functionRole()
        },
        async functionRoleGetAgent(){
          let {object:res} = await this.API.functionRoleGetAgent()
          this.agentList = res
        },
        showAddModal(){
          this.$store.commit('setRightVisible',true)
        },
        query(){
            this.current = 1
            this.functionRole()
        },
        handleSelectionChange(val){
          this.selectDataList=val.map( item=>{
            return item.sid
          })
        },
        returnRoleTypeCode(val){
            let code = ''
            this.roleTypeList.forEach(item =>{
                if(item.value == val){
                    code = item.code
                }
            })
            return code
        },
        async deleteBatch(){
          if(this.selectDataList.length == 0){
              this.comm.showMsg(false,this.$t('index.delete_select'))
              return
          }
          let res = await this.API.functionRoleDeleteBatch({
            ids:this.selectDataList
          })
          if(res.success){
                this.$message({
                    message: this.$t('index.control_success'),
                    type: 'success'
                });
            }else{
                this.$message({
                    message: this.$t('index.control_fail'),
                    type: 'warning'
                });
            }
            this.functionRole()
        },
        uploadPage(flag){
          console.log(flag,'flag');
          if(flag){
            this.functionRole()
          }
        },
        async getAgent(){
            let {object:res} = await this.API.getAgent()
            this.agentData = res || []
        },
        async getRoleTypeList(){
            let {object:res} = await this.API.getRoleTypeList()
            this.roleTypeList = res || []
        },
        async functionRole(){
            this.loading = true
            let res = await this.API.functionRole({
                size:this.size,
                current :this.current,
                agentId:this.agentId,
                roleType:this.roleType,
            })
            this.total = res.total
            this.dataRows = res.rows
            this.loading = false
        }
    },
};
</script>

<style  lang="less" scoped>
.rights-management-main-box{
    font-size: 14px;
}
</style>
